<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>z-UI表单</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-alert/css/z-UI.alert.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-tab/css/z-UI.tab.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-validate/css/validate.css"/>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="z-UI.js"></script>
    <script type="text/javascript" src="z-UI-alert/js/z-UI.alert.js"></script>
    <script type="text/javascript" src="z-UI-tab/js/z-UI.tab.js"></script>
    <script type="text/javascript" src="z-UI-validate/js/verify.js"></script>
    <style>
		html,body{
            width: 100%;height: 100%;
            margin:0;
        }
    </style>
</head>
<body class="zUI-app">

<div style="overflow-y: auto;padding: 20px;" class="zUI-full">
    <div class="zUI-card sm" >
        <div class="zUI-card-title zUI-bg-blue2 zUI-white">
            <div class="text">自适应表单容器</div>
        </div>
        <div class="zUI-card-wrap">
            <form class="zUI-form" id="form1">
                <div class="zUI-items">
                    <div class="zUI-form-line">
                        <div class="zUI-form-label required">
                            姓名
                        </div>
                        <div class="zUI-form-item">
                            <input class="zUI-input" name="username" type="text" value="张三"/>
                        </div>
                    </div>
                    <div class="zUI-form-line">
                        <div class="zUI-form-label">
                            密码
                        </div>
                        <div class="zUI-form-item">
                            <input class="zUI-input" name="password" type="password" value="123456"/>
                        </div>
                    </div>
                    <div class="zUI-form-line">
                        <div class="zUI-form-label">
                            手机号手机号手机号手机号手机号
                        </div>
                        <div class="zUI-form-item">
                            <input class="zUI-input" name="phone" type="text"/>
                        </div>
                    </div>
                    <div class="zUI-form-line">
                        <div class="zUI-form-label">
                            星座
                        </div>
                        <div class="zUI-form-item">
                            <select class="zUI-input zUI-select" name="xz">
                                <option value="双子座">双子座</option>
                                <option value="魔蝎座">魔蝎座</option>
                            </select>
                        </div>
                    </div>
                    <div class="zUI-form-line">
                        <div class="zUI-form-label">
                            性别
                        </div>
                        <div class="zUI-form-item">
                            <input class="zUI-input" name="sex" type="radio" value="1" title="男" disabled="disabled">
                            <input class="zUI-input" name="sex" type="radio" value="2" title="女" checked>
                        </div>
                    </div>
                    <div class="zUI-form-line">
                        <div class="zUI-form-label">
                            爱好
                        </div>
                        <div class="zUI-form-item">
                            <input class="zUI-input" name="love" type="checkbox" value="1" title="音乐" checked>
                            <input class="zUI-input" name="love" type="checkbox" value="2" title="游泳">
                            <input class="zUI-input" name="love" type="checkbox" value="3" title="旅游" checked disabled="disabled">
                        </div>
                    </div>
                    <div class="zUI-form-line zUI-form-btns">
                        <button type="button" class="zUI-btn info" onclick="zUI.dialog.alert('<pre>'+JSON.stringify(zUI.form.getData('#form1'),null,2)+'</pre>')">获得数据</button>
                        <button type="button" class="zUI-btn error" onclick="zUI.form.reset('#form1')">重置</button>
                    </div>

                </div>
            </form>
        </div>
    </div>
    <div id="domUI" class="zUI-hide" style="display: flex;flex-direction: column">
        <div class="zUI-card sm m5" zUI-folder="show" id="alertForm" style="width: 400px;">
            <div class="zUI-card-title">
                <div class="text">基本信息</div>
            </div>
            <div class="zUI-card-wrap">
                <form class="zUI-form" zUI-form id="form2">
                    <div class="zUI-items">
                        <div class="zUI-form-line">
                            <div class="zUI-form-label required">
                                姓名
                            </div>
                            <div class="zUI-form-item">
                                <input class="zUI-input" name="username" type="text" value="Mr.zhou" zUI-verify zUI-tip="姓名不能为空">
                            </div>
                        </div>
                        <div class="zUI-form-line">
                            <div class="zUI-form-label required">
                                密码
                            </div>
                            <div class="zUI-form-item">
                                <input class="zUI-input" name="password" type="password" value="12" zUI-verify="letter_number,length[8-16]" zUI-tip="密码为8-16位的字母、数字或下划线">
                            </div>
                        </div>
                        <div class="zUI-form-line">
                            <div class="zUI-form-label">
                                QQ号
                            </div>
                            <div class="zUI-form-item">
                                <input class="zUI-input" name="phone" type="text" value="2250884056" zUI-verify="integer,length[10]" zUI-tip="QQ号格式为10位的数字">
                            </div>
                        </div>
                        <div class="zUI-form-line">
                            <div class="zUI-form-label">
                                职业
                            </div>
                            <div class="zUI-form-item">
                                <select class="zUI-input zUI-select" name="job" zUI-verify="required" zUI-tip="请选择职位">
                                    <option value="">请选择</option>
                                    <option value="java">java</option>
                                    <option value="python">python</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </form>
            </div>

        </div>
        <div class="zUI-card sm m5" zUI-folder="show" id="alertForm2" style="width: 400px;">
            <div class="zUI-card-title">
                <div class="text">其它信息</div>
            </div>
            <div class="zUI-card-wrap">
                <form class="zUI-form" zUI-form id="form3">
                    <div class="zUI-items">
                        <div class="zUI-form-line">
                            <div class="zUI-form-label required">
                                身高
                            </div>
                            <div class="zUI-form-item">
                                <input class="zUI-input" name="height" type="text" value="185cm" zUI-verify zUI-tip="身高不能为空">
                            </div>
                        </div>
                        <div class="zUI-form-line">
                            <div class="zUI-form-label required">
                                体重（kg）
                            </div>
                            <div class="zUI-form-item">
                                <input class="zUI-input" name="weight" type="text" value="9999" zUI-verify="integer,checkWeight">
                            </div>
                        </div>
                        <div class="zUI-form-line">
                            <div class="zUI-form-label">
                                血型
                            </div>
                            <div class="zUI-form-item">
                                <select class="zUI-input zUI-select" name="blood">
                                    <option value="">请选择</option>
                                    <option value="O">O型</option>
                                    <option value="A">A型</option>
                                    <option value="B">B型</option>
                                    <option value="AB">AB型</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>
    <button type="button" class="zUI-btn info" onclick="alertDom()">弹出隐藏的表单</button>



</div>
</body>

<script>
    function alertDom(){
        zUI.dialog.alertDom({
            target:'#domUI',
            title:'个人信息录入',
            btns:{
                '提交': function () {
                    zUI.dialog.alert('<pre>'+JSON.stringify(zUI.form.getData('#form2'),null,2)+'</pre>');
                    return false;
                },
                '提交并关闭': function () {
                    zUI.dialog.alert('<pre>'+JSON.stringify(zUI.form.getData('#form2'),null,2)+'</pre>');
                },
                '基本信息验证': function () {
                    if(zUI.validate.verify('#form2')){
                        zUI.dialog.alert('验证通过');
                    }else{
                        return false;
                    }
                },
                '其他信息验证': function () {
                    if(zUI.validate.verify('#form3')){
                        zUI.dialog.alert('验证通过');
                    }else{
                        return false;
                    }
                },
                '关闭': function () {

                }
            }
        });

    }
    zUI.onLoad(function () {
        zUI.validate.extend({
            msgSec:'<br>',
            errorCallback:function(msg){
                zUI.dialog.alert(msg);
            }
        });
        zUI.validate.addVerify("#form3",{
            checkWeight:function(v){
                if(v === '' || v <= 0){
                    return '体重不合法';
                }
                return v <= 120 ? true : '体重不能超过120kg';
            }
        });
        zUI.tab.loadPanel({
            elem:'#alertForm',
        });
        zUI.tab.loadPanel({
            elem:'#alertForm2',
        });
    })

</script>


</html>